<!DOCTYPE html>
<html lang="<%=language%>" dir="<%=t('direction')%>" >
    <head>
        <script>
            const translations = <%-JSON.stringify({
                ...t('create-account.javascript', {returnObjects: true})
            })%>;
        </script>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title><%=t('create-account.title')%></title>
        <link rel='stylesheet' href='/css/header.css'>
        <link rel='stylesheet' href='/css/createaccount.css'>
        <link rel='stylesheet' href='/css/footer.css'>
        <link rel="icon" href="/img/favicon-light.png" media="(prefers-color-scheme: light)" />
        <link rel="icon" href="/img/favicon-dark.png" media="(prefers-color-scheme: dark)" id="favicon" />
        <script defer src="/scripts/cjs/views/createaccount.js"></script>
    </head>
    <body>
        <%- include(`${viewsfolder}/components/header`, {t:t, languages:languages, language:language}) %>
        <main>
            <div id="content">
                <h1 class="center"><%=t('create-account.title')%></h1>
                <form action="./createaccount" method="POST" class="center" id="form">
                    <div class="formfield">
                        <div id="usernameinputline">
                            <label for="username"><%=t('create-account.username')%></label>
                            <input id="username" type="text" name="username" required minLength="3" maxLength="20" autocomplete="off" autofocus>
                        </div>
                        <!-- This is where our script inserts an error division! -->
                        <div id="emailinputline">
                            <div class="line">
                            <label for="email"><%=t('create-account.email')%></label>
                            <input id="email" type="email" name="email" required minLength="3" maxLength="320" autocomplete="off">
                            </div>
                        </div>
                        <div id="passwordinputline">
                            <div class="line">
                            <label for="password"><%=t('create-account.password')%></label>
                            <input id="password" type="password" name="password" required minLength="6">
                            </div>
                        </div>
                        
                    </div>
                    <input type="submit" value="<%=t('create-account.create_button')%>" class="unavailable" id="submit">
                    <p class="agreement"><%=t('create-account.agreement.0')%><a href='/termsofservice' target='_blank'><%=t('create-account.agreement.1')%></a><%=t('create-account.agreement.2')%></p>
                </form>
            </div>
        </main>
        <%- include(`${viewsfolder}/components/footer`, {t:t, languages:languages, language:language}) %>
    </body>
</html>